<template>
  <div class="mapbody">
    <div id="citymap" class="citymap1"></div>
    <div class="right">
      <el-tabs
        :stretch="true"
        v-model="activeName"
        type="border-card"
        @tab-click="tabChange"
      >
        <el-tab-pane label="全市" name="all">
          <chartall v-if="taball" :active="activeName" />
        </el-tab-pane>

        <el-tab-pane :label="singlename" name="single">
          <chartsingle v-if="tabsingle" :active="activeName" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import city from '../../assets/city'
import chartall from "./chartall.vue";
import Chartsingle from "./chartsingle.vue";
// import $ from "jquery";
// import huhehaote from "../../../public/data/city";
export default {
  components: { chartall, Chartsingle },

  data() {
    return {
      taball: "true",
      tabsingle: "true",
      activeName: "all",
      singlename: "玉泉区",
      data: [
        { name: "武川县", value: "200" },
        { name: "新城区", value: "1000" },
        { name: "回民区", value: "800" },
        { name: "土默特左旗", value: "100" },
        { name: "玉泉区", value: "400", selected: true },
        { name: "赛罕区", value: "600" },
        { name: "托克托县", value: "800" },
        { name: "和林格尔县", value: "700" },
        { name: "清水河县", value: "1" },
      ],
    };
  },
  computed: {},
  methods: {
    async draw() {
      // let that = this;
      var echarts = require("echarts");
      //   获取地图
      // var city = await this.$http.get("http://localhost:8080/huhehaote/data/city.json");
      var chartDom = document.getElementById("citymap");
      var myChart = echarts.init(chartDom);
      //   注册地图
      echarts.registerMap("huhehaote", city);
      var option = {
        series: [
          {
            name: "呼和浩特市项目总览",
            label: {
              show: true,
            },
            zoom: 1.0,
            type: "map",
            map: "huhehaote", // 自定义扩展图表类型
            data: this.data,
          },
        ],
        title: {
          textStyle: {
            color: "white",
          },
          top: 20,
          text: "呼和浩特市项目总览",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} (个)",
        },
        visualMap: {
          min: 0,
          max: 2000,
          text: ["项目数", ""],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["#379CE5", "#E7F2FB", "white"],
          },
        },
      };

      option && myChart.setOption(option);
      myChart.on("click", (params) =>{
        // console.log(this);
        // console.log(params.name);
        // console.log(test);
        // 子组件刷新
        this.singlename = params.name;
        this.activeName = "single";
        this.tabsingle = false;
        this.$nextTick(() => {
          this.tabsingle = true;
        });
        //  return test
        //此处写点击事件内容
      });
      //点击事件，此事件还可以用到柱状图等其他地图
    },
    tabChange() {
      // 切换tab栏时,在进行一次子组件刷新
      // console.log(tab, event);
      if (this.activeName == "single") {
        this.tabsingle = false;
        this.$nextTick(() => {
          this.tabsingle = true;
        });
      }
      if (this.activeName == "all") {
        this.taball = false;
        this.$nextTick(() => {
          this.taball = true;
        });
      }
    },
  },
  mounted() {
    this.draw();
  },
  created() {
    if (this.activeName == "all") {
      this.$nextTick(() => {
        this.taball = true;
      });
    }
    //   console.log(huhehaote);
  },
};
</script>

<style >
.mapbody {
  position: relative;
  width: 100%;
  height: 540px;
  background-image: linear-gradient(#49a5e7, #a0c8ee);
}
.citymap1 {
  width: 500px;
  height: 530px;
  float: left;
}
.right {
  position: absolute;
  /* background-color: rgba(255, 255, 255, 30%); */
  width: 500px;
  height: 500px;
  right: 40px;
  top: 20px;
}
.right::after {
  content: "";
  margin: 0px;
  padding: 0px;
  clear: both;
}
.right .el-tabs {
  width: 100%;
  background-color: rgba(255, 255, 255, 10%);
}
.ulchart {
  padding: 0px;
  list-style: none;
  display: flex;
  font-size: 16px;
  color: white;
  justify-content: space-around;
}
.showli {
  font-size: 33px;
  margin-top: 5px;
}
.showli span {
  margin-left: 3px;
}
</style>